<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>数据填报</el-breadcrumb-item>
      <el-breadcrumb-item>数据填报</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>

    <!-- 施工员 待定-->
    <div class="process" v-if="arr.indexOf('process') > -1">
      <el-row>
        <el-col :span="17"><span class="title">施工员-进度表</span></el-col>
        <el-col :span="7">
          <el-input placeholder="请输入名称" v-model="proQuery.query" @keyup.enter="getProcess()" clearable @clear="getProcess()">
            <template #append><el-button icon="el-icon-search" @click="getProcess()"></el-button></template>
          </el-input>
        </el-col>
      </el-row>
      <el-table :data="process" border stripe style="margin-bottom:15px">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="项目名称" prop="itemName"></el-table-column>
      <el-table-column label="进度表信息" ></el-table-column>
      <el-table-column label="操作" width="300px">
        <template v-slot="scope"><el-button type="primary" icon="el-icon-edit" size="mini" @click="reportPro(scope.row)" >填报</el-button></template>
      </el-table-column>
      </el-table>
    <el-config-provider :locale="locale">
      <el-pagination @size-change="proSizeChange" @current-change="proCurChange" :current-page="proQuery.pagenum" :page-sizes="[5,10,20]" :page-size="proQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="proTotal" ></el-pagination>
    </el-config-provider>

    <!-- 填报对话框  -->
      <el-dialog title="数据填报" v-model="reportProVisible" width="50%" @close="reportProClosed">
      <el-form ref="reportPro" :model="curPro" label-width="80px" width="100%">
        <el-form-item label="项目名称" prop="item">
          <el-select v-model="curPro.item" placeholder="请选择项目" clearable style="width:100%">
            <el-option v-for="item in itemlist" :key="item.itemId" :label="item.itemName" :value="item.itemId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起桩号" prop="beginPile"><el-input v-model.number="curPro.beginPile"></el-input></el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="reportProVisible = false">取消</el-button>
          <el-button type="primary" @click="submitPro()">确定</el-button>
        </span>
      </template>
      </el-dialog>
  </div>

    <!-- 实验员 -->
    <div class="experiment"  v-if="arr.indexOf('experiment') > -1">
        <el-row>
          <el-col :span="17"><span class="title">实验员-试验检测表</span></el-col>
          <el-col :span="7">
            <el-input placeholder="请输入试验名称" v-model="expQuery.query" @keyup.enter="getExperiment()" clearable @clear="getExperiment()">
              <template #append><el-button icon="el-icon-search" @click="getExperiment()"></el-button></template>
            </el-input>
          </el-col>
        </el-row>
        <el-table :data="experiment" border stripe style="margin-bottom:15px">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="试验名称" prop="experimentContentName"></el-table-column>
        <el-table-column label="关联项目" prop="itemName">
          <template v-slot="scope"><span>{{scope.row.itemName?scope.row.itemName:'无'}}</span></template>
        </el-table-column>      
        <el-table-column label="清单量" prop="inventoryQuantity"></el-table-column>
        <el-table-column label="实际检测数量" prop="actualQuantity"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope"><el-button type="primary" icon="el-icon-edit" size="mini" @click="reportExp(scope.row)" >填报</el-button></template>
        </el-table-column>
        </el-table>
      <el-config-provider :locale="locale">
        <el-pagination @size-change="expSizeChange" @current-change="expCurChange" :current-page="expQuery.pagenum" :page-sizes="[5,10,20]" :page-size="expQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="expTotal" ></el-pagination>
      </el-config-provider>

      <!-- 填报对话框  -->
        <el-dialog title="数据填报" v-model="reportExpVisible" width="50%" @close="reportExpClosed">
        <el-form ref="reportExp" :model="curExp" label-width="80px" width="100%">
          <el-form-item label="试验名称"><el-input v-model="curExp.experimentContentName" readonly></el-input></el-form-item>
          <el-form-item label="关联项目"><el-input v-model="curExp.itemName" readonly></el-input></el-form-item>
          <el-form-item label="清单量"><el-input v-model="curExp.inventoryQuantity" readonly></el-input></el-form-item>
          <el-form-item label="公式"><el-input v-model="curExp.formula"></el-input></el-form-item>
          <el-form-item label="应作量"><el-input v-model="curExp.requiredQuantity" readonly></el-input></el-form-item>
          <el-form-item label="上报量" prop="reportedQuantity">
            <el-input type="number" placeholder="请输入数字" v-model="curExp.reportedQuantity"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="reportExpVisible = false">取消</el-button>
            <el-button type="primary" @click="submitExp()">确定</el-button>
          </span>
        </template>
        </el-dialog>
    </div>

    <!-- 资料员 -->
    <div class="document"  v-if="arr.indexOf('document') > -1">
        <el-row>
          <el-col :span="17"><span class="title">资料员-资料表</span></el-col>
          <el-col :span="7">
            <el-input placeholder="请输入资料名称" v-model="docQuery.query" @keyup.enter="getDocument()" clearable @clear="getDocument()">
              <template #append><el-button icon="el-icon-search" @click="getDocument()"></el-button></template>
            </el-input>
          </el-col>
        </el-row>
        <el-table :data="document" border stripe style="margin-bottom:15px">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="册数" prop="volume"></el-table-column>
        <el-table-column label="文件材料名称" prop="documentContentName"></el-table-column>
         <el-table-column label="编制完成" prop="isOrganization">
            <template v-slot="scope"><span>{{scope.row.isOrganization?'是':'否'}}</span></template>
          </el-table-column>
          <el-table-column label="监理已签认" prop="isSupervisor">
            <template v-slot="scope"><span>{{scope.row.isSupervisor?'是':'否'}}</span></template>
          </el-table-column>
          <el-table-column label="设计已签认" prop="isDesign">
            <template v-slot="scope"><span>{{scope.row.isDesign?'是':'否'}}</span></template>
          </el-table-column>
          <el-table-column label="建设单位已签认" prop="isConstruction">
            <template v-slot="scope"><span>{{scope.row.isConstruction?'是':'否'}}</span></template>
          </el-table-column>
          <el-table-column label="已移交档案馆" prop="isArchives">
            <template v-slot="scope"><span>{{scope.row.isArchives?'是':'否'}}</span></template>
          </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope"><el-button type="primary" icon="el-icon-edit" size="mini" @click="reportDoc(scope.row)" >填报</el-button></template>
        </el-table-column>
        </el-table>
        <el-config-provider :locale="locale">
        <el-pagination @size-change="docSizeChange" @current-change="docCurChange" :current-page="docQuery.pagenum" :page-sizes="[5,10,20]" :page-size="docQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="docTotal" ></el-pagination>
      </el-config-provider>

      <!-- 填报对话框  -->
        <el-dialog title="数据填报" v-model="reportDocVisible" width="50%" @close="reportDocClosed">
        <el-form ref="reportDoc" :model="curDoc" label-width="150px" width="100%">
          <el-form-item label="文件材料名称"><el-input v-model="curDoc.documentContentName" readonly></el-input></el-form-item>
          <el-form-item label="编制完成">
            <el-radio v-model="curDoc.isOrganization" :label="1">是</el-radio>
            <el-radio v-model="curDoc.isOrganization" :label="0">否</el-radio>
          </el-form-item>
          <el-form-item label="监理已签认">
            <el-radio v-model="curDoc.isSupervisor" :label="1">是</el-radio>
            <el-radio v-model="curDoc.isSupervisor" :label="0">否</el-radio>
          </el-form-item>
          <el-form-item label="设计已签认">
            <el-radio v-model="curDoc.isDesign" :label="1">是</el-radio>
            <el-radio v-model="curDoc.isDesign" :label="0">否</el-radio>
          </el-form-item>
          <el-form-item label="建设单位已签认">
            <el-radio v-model="curDoc.isConstruction" :label="1">是</el-radio>
            <el-radio v-model="curDoc.isConstruction" :label="0">否</el-radio>
          </el-form-item>
          <el-form-item label="已移交档案馆">
            <el-radio v-model="curDoc.isArchives" :label="1">是</el-radio>
            <el-radio v-model="curDoc.isArchives" :label="0">否</el-radio>
          </el-form-item>
        </el-form>
        <!-- 底部 -->
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="reportDocVisible = false">取消</el-button>
            <el-button type="primary" @click="submitDoc()">确定</el-button>
          </span>
        </template>
        </el-dialog>
    </div>

    </el-card>
  </div>
</template>

<script>
import zhCn from "element-plus/lib/locale/lang/zh-cn";
export default {
    data(){
      return{
        arr:['document','experiment','process'],
        
        itemlist:[],
        curPro:{},
        process:[],
        reportProVisible: false,
        proQuery:{
          query:"", pagenum:1, pagesize:5
        },
        proTotal:0,

        curExp:{},
        experiment:[],
        reportExpVisible: false,
        expQuery:{
          query:"", pagenum:1, pagesize:5
        },
        expTotal:0,

        curDoc:{},
        document:[],
        reportDocVisible: false,
        docQuery:{
          query:"", pagenum:1, pagesize:5
        },
        docTotal:0,
      }
    },
    setup() {
      return {locale: zhCn};
    },
    mounted(){
        // 获取当前用户的【岗位】对应的【权限列表】   按钮级
        // this.arr = window.sessionStorage.getItem('permisson')
        // 获取基础数据
        if(this.arr.indexOf('document') > -1){ this.getDocument(); }
        if(this.arr.indexOf('experiment') > -1){ this.getExperiment(); }
        if(this.arr.indexOf('process') > -1){ 
          this.getProcess(); 
          this.getItemList();
        }        
    },
    methods:{
      async getItemList(){
        // const { data: res } = await this.$http.get("");
        // this.itemlist = res.data;
      },
      async getProcess(){
        // todo
      },
      async getExperiment(){
          const { data: res } = await this.$http.get("experimenter/getReportExperiment",{params:this.expQuery});
          console.log(res);
          if (res.code !== 200) return this.$message.error(res.msg);
          this.experiment = res.data.list;
          this.expTotal = res.data.total;
      },
      async getDocument(){
          const { data: res } = await this.$http.get("documenter/getReportDocument",{params:this.docQuery});
          console.log(res);
          if (res.code !== 200) return this.$message.error(res.msg);
          this.document = res.data.list;
          this.docTotal = res.data.total;
      },
      proSizeChange(newSize) {
        this.proQuery.pagesize = newSize;
        this.getProcess();
      },
      proCurChange(newPage) {
        this.proQuery.pagenum = newPage;
        this.getProcess();
      },
      expSizeChange(newSize) {
        this.expQuery.pagesize = newSize;
        this.getExperiment();
      },
      expCurChange(newPage) {
        this.expQuery.pagenum = newPage;
        this.getExperiment();
      },
      docSizeChange(newSize) {
        this.docQuery.pagesize = newSize;
        this.getDocument();
      },
      docCurChange(newPage) {
        this.docQuery.pagenum = newPage;
        this.getDocument();
      },
      reportPro(item) {
        this.reportProVisible = true;
        // todo 传参数 this.curPro.xx = item.xx
      },
      reportProClosed() {this.$refs.reportPro.resetFields()},
      async submitPro(){
        console.log(this.curPro)
        // let formData = new FormData();
        // formData.append('itemId',this.curPro.itemId)
        // const { data: res } = await this.$http.post("",formData);
        // console.log(res);
        // if (res.code !== 200) return this.$message.error(res.msg);
        this.reportProVisible = false;
      },
      reportExp(item) {
          this.reportExpVisible = true;
          this.curExp.experimentContentId = item.id;
          this.curExp.experimentContentName = item.experimentContentName;
          this.curExp.itemId = item.itemId;
          if(item.itemName != null){
            this.curExp.itemName = item.itemName;
          }else{
            this.curExp.itemName = "无"
          }
          this.curExp.inventoryQuantity = item.inventoryQuantity;
          this.curExp.formula = item.formula;
          // 公式计算得到应作量，或固定值
          this.curExp.requiredQuantity = parseInt(item.formula);
      },
      reportExpClosed() {this.$refs.reportExp.resetFields()},
      async submitExp(){
        console.log(this.curExp)
        let formData = new FormData();
        formData.append('experimentContentId',this.curExp.experimentContentId)
        formData.append('itemId',this.curExp.itemId)
        formData.append('experimentContentName',this.curExp.experimentContentName)
        formData.append('formula',this.curExp.formula)
        formData.append('inventoryQuantity',this.curExp.inventoryQuantity)
        formData.append('requiredQuantity',this.curExp.requiredQuantity)
        formData.append('reportedQuantity',this.curExp.reportedQuantity)
        const { data: res } = await this.$http.post("experimenter/reportExperiment",formData);
        console.log(res);
        if (res.code !== 200) return this.$message.error(res.msg);
        this.reportExpVisible = false;
      },
      reportDoc(item) {
          this.reportDocVisible = true;
          this.curDoc.documentId = item.id;
          this.curDoc.volume = item.volume;
          this.curDoc.documentContentName = item.documentContentName;
          this.curDoc.isOrganization = item.isOrganization;
          this.curDoc.isSupervisor = item.isSupervisor;
          this.curDoc.isDesign = item.isDesign;
          this.curDoc.isConstruction = item.isConstruction;
          this.curDoc.isArchives = item.isArchives;
          console.log(this.curDoc);
      },
      reportDocClosed() {this.$refs.reportDoc.resetFields()},
      async submitDoc(){
        console.log(this.curDoc)
        let formData = new FormData();
        formData.append("documentContentId",this.curDoc.documentId)
        formData.append("volume",this.curDoc.volume)
        formData.append("documentContentName",this.curDoc.documentContentName)
        formData.append("isOrganization",this.curDoc.isOrganization)
        formData.append("isSupervisor",this.curDoc.isSupervisor)
        formData.append("isDesign",this.curDoc.isDesign)
        formData.append("isConstruction",this.curDoc.isConstruction)
        formData.append("isArchives",this.curDoc.isArchives) 
        const { data: res } = await this.$http.post("documenter/reportDocument",formData);
        console.log(res);
        if (res.code !== 200) return this.$message.error(res.msg);
        this.reportDocVisible = false;
      },
      
    }    
}
</script>

<style lang="less" scoped>
.title{
    font-size: 14px;
    color:#666;
    display: block;
    padding:10px 0 0 2px;
  }
</style>

